<template>
    <div class="modal" v-if="visible" @click.stop>
        <el-card class="box-card" :style="{width: width, height: height}">
            <div slot="header" class="clearfix" style="padding: 10px;">
                <span>{{ title }}</span>
                <el-button @click="closePopup()" style="float: right; padding: 3px 0" type="text">关闭</el-button>
            </div>
            <div class="searchbar" style="padding: 0 10px;">
                <el-row :gutter="20">
                    <el-col :span="2" class="label-el-col">
                        <el-button size="mini" @click="init()">刷新</el-button>
                    </el-col>
                    <el-col :span="6" class="label-el-col">
                        <el-input size="mini" placeholder="搜索关键词" v-model="searchInput" class="input-with-select">
                            <el-select v-model="searchType" placeholder="请选择">
                                <el-option label="昵称" value="1" ></el-option>
                                <el-option label="内容" value="2"></el-option>
                            </el-select>
                            <pers-button perms="live:list:screen:sign:search" icon="el-icon-search" @click="search"></pers-button>
                        </el-input>
                    </el-col>
                    <el-col :span="4" class="label-el-col">
                        <el-select size="mini" style="margin-left:20px;" v-model="type" placeholder="请选择" @change="typechange">
                            <el-option label="全部" value="-1" ></el-option>
                            <el-option
                                v-for="item in TypeData"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="3" class="label-el-col">
                        <pers-button
                            icon="el-icon-edit"
                            size="mini"
                            @click="sendBatchCommand"
                            perms="live:list:screen:sign:all_send"
                            type="success"
                            label="一键发送"
                            :disabled="isDisabled"
                        ></pers-button>
                    </el-col>
                </el-row>
                <el-table
                    :data="tableData"
                    style="width: 100%;margin-bottom: 20px;"
                    row-key="id"
                    border
                    stripe
                    default-expand-all
                    max-height="360"
                    v-loading="loading"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="id" label="ID" width="55"></el-table-column>
                    <el-table-column prop="touxiang_img" label="头像">
                        <template slot-scope="scope">
                            <el-image :src="scope.row.touxiang_img" fit="cover" style="width: 40px;height: 40px;"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column prop="nick" label="昵称"></el-table-column>
                    <el-table-column prop="pinglun" label="内容"></el-table-column>
                    <el-table-column prop="id" label="操作">
                        <template slot-scope="scope">
                            <PersButton type="text" size="mini" label="发送" icon="fa fa-pencil" perms="live:list:screen:sign:send" @click="sendCommand(scope.row)"></PersButton>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pageNumber"
                        :page-sizes="[10, 50, 100, 200]"
                        :page-size="pageSize" background layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                    ></el-pagination>
                </div>
            </div>
        </el-card>
        

    </div>
</template>

<script>
import Panle from '@/components/Panle.vue'
import PersButton from '@/components/PersButton.vue'
import {getShuZiRenData, getShuZiRenType} from '@/api/live/shuziren'
import SelectImg from '@/components/select-img.vue'

export default {
    name: 'pay-frame',
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: ''
        },
        width: {
            type: String,
            default: '50%'
        },
        height: {
            type: String,
            default: '50%'
        }
    },
    components:{
        Panle,
        PersButton,
        SelectImg
    },
    data(){
        return{
            loading:false,
            pageSize: 10, //一页显示多少条
            pageNumber: 1,
            total: 0,
            TypeData:[],
            searchType: '1',
            searchInput: '',
            type:'-1',
            tableData: [],
            isDisabled: true,
        }
    },
    created() {
        
    },
    mounted() {
        // document.addEventListener('click', this.closeStatus);
    },
    watch: {
        visible(newVal) {
            if (newVal) {
                this.init(); // 当 visible 变为 true 时请求数据  
            }
        }
    },
    methods:{
        init() {
            this.isDisabled = true;
            this.loading = true;
            this.parentDate=[];
            let _param = {
                "size": this.pageSize,
                "page": this.pageNumber,
                "type": this.searchType,
                "input": this.searchInput,
                "flag": this.type
            }
            console.log(_param);
            getShuZiRenData(_param).then((res)=>{
                this.loading = false;
                if(res.code === 200){
                    console.log(res);
                    this.tableData = res.data.list;
                    this.total = res.data.total;
                    this.loading = false;
                }
            })
            getShuZiRenType().then((res)=>{
                if(res.code === 200){
                    console.log('TypeData', res);
                    this.TypeData = res.data;
                    console.log('--TypeData--', this.TypeData);
                }
            })
        },
        // 关闭弹窗
        closePopup() {
            this.$emit('close');
        },
        // 内部关闭
        closeStatus() {
            if (this.visible === true) {
                this.visible = false;
            }
        },
        // 关键词搜索
        search: function() {
            this.searchinput = this.searchinput;
            this.init();
        },
        // 类型筛选
        typechange:function(e){
            console.log(e);
            this.flag = e;
            this.init();
        },
        // 页码1
        handleSizeChange: function(e) {
            console.log(e);
            this.pageSize = e;
            this.init();
        },
        // 页码2
        handleCurrentChange: function(e) {
            console.log(e);
            this.pageNumber = e;
            this.init();
        },
        // 已选
        handleSelectionChange: function(e) {
            // console.log(e);
            this.multipleSelectionArray = e;
            let selectChang = []
            for (let item of e) {
                selectChang.push(item.id)
            }
            this.multipleSelection = selectChang;
            this.multipleSelectioncount = selectChang.length;
            // console.log(selectChang);
            this.isDisabled = true;
            if (selectChang.length > 0) {
                this.isDisabled = false;
            }
        },
        // 发送指令
        sendCommand(row) {
            this.$emit('send', row);
            this.closePopup();
        },
        // 批量发送指令
        sendBatchCommand() {
            if (this.multipleSelectioncount > 0) {
                this.$emit('sendBatch', this.multipleSelectionArray);
                this.closePopup();
            } else {
                this.$message({
                    message: '请选择要发送的评论',
                    type: 'warning'
                });
            }
        },
    },
    beforeDestroy() {
        // document.removeEventListener('click', this.closeStatus);
    }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/common";
/* 样式代码 */
.modal {
    /* 弹窗样式 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 555;
}
.modal-content {
    /* 弹窗内容样式 */
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
}
.label-el-col {
    text-align: center;
}
.text {
    font-size: 14px;
}
.item {
    margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}
.clearfix:after {
    clear: both
}
.box-card {
    width: 80%;
    height: 80%;
}
.el-select .el-input {
     width: 80px;
 }
.input-with-select .el-input-group__prepend {
    background-color: #fff;
}
</style>
